<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>好友聊天</title>
    <style>
        /* 样式可根据需求自行修改 */
        body {
            height: 450px;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        #chat-container {
            max-width: 800px;
            margin: 20px auto;
            background-color: #f5f5f5;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 600px;
        }
        #chat-content {
            height: 450px;
            flex: 1;
            padding: 10px;
            overflow-y: auto;
        }

        .message-container {
            display: flex;
            justify-content: flex-start;
            margin: 10px;
        }
        .message {
            background-color: #fff;
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 10px;
            max-width: 70%;
        }
        .message img {
            max-width: 100%;
            border-radius: 8px;
            margin-top: 5px;
        }
        .xiaoming-message {
            justify-content: flex-end;
        }
        .message-text {
            white-space: pre-wrap;
        }
        #message-input-container {
            padding: 10px;
            background-color: #fff;
            display: flex;
            align-items: center;
            border-top: 1px solid #ccc;
            position: sticky;
            bottom: 0;
        }
        #message-input {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 4px;
            resize: none;
            font-size: 16px;
            background-color: #f5f5f5;
        }
        #image-input {
            display: none;
        }
        #send-button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }
        .send-image-button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        /* 新增样式 */
        #message-input-container form {
            display: flex;
            flex-grow: 1;
        }
    </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="chat-container">
    <div id="chat-content" >
        <div class="message-container">
            <div class="message xiaoming-message">
                <p class="message-text">对面</p>
            </div>
        </div>
        <div class="message-container">
            <div class="message">
            </div>
        </div><!-- 添加更多消息，可用JavaScript动态生成 -->
    </div>
    <div id="message-input-container">
        <form id="myForm"  enctype="multipart/form-data">
            <input type="file" id="image-input" accept="image/*">
            <input type="button" class="send-image-button" value="发送图片" onclick="chooseImage();">
            <textarea id="message-input" placeholder="输入消息..."></textarea>
            <input type="button" id="send-button" value="发送">
        </form>
    </div>
</div>
<script>
    let username1;
    let UserAvatar1;
    let Friendname1;
    let FriendAvatar1;
    // let username='';
    $(document).ready(function(){
        $.ajax({
            type: 'POST',
            url: 'http://192.168.43.172:8080/chat/GetFriend',
            data: {
            },
            dataType: "json",
            success: function (response){
                username1=response.user.username;
                UserAvatar1=response.user.photo;
                Friendname1=response.Friend.username;
                FriendAvatar1=response.Friend.photo;
                console.log("用户名："+username1);
                console.log("用户头像:"+UserAvatar1);
                // console.log(response.Friend);
                console.log("好友名："+Friendname1);
                console.log("好友头像："+FriendAvatar1);

            },
            error:function (response){
                console.log("请求处理失败8");
            }
        });
    });
    function uploadFormData(formData) {
        $.ajax({
            type: "POST",
            url: "http://192.168.43.172:8080/chat/Upload",
            data: formData,
            processData: false, // 防止jQuery自动将数据转换为查询字符串
            contentType: false, // 防止jQuery设置Content-Type头部
            success: function(response) {
                // 在这里处理从服务器返回的成功响应
                console.log("表单数据成功提交:", response);
            },
            error: function(xhr, status, error) {
                // 在这里处理错误
                console.error("提交表单数据时出错:", error);
            }
        });
    }
    function chooseImage() {
        document.getElementById('image-input').click();
    }
    document.getElementById('image-input').addEventListener('change', function() {
        var fileInput = document.getElementById('image-input');
        var file = fileInput.files[0];
        if (file) {
            var formData = new FormData();
            formData.append('photo', file);
            uploadFormData(formData);
            sendImage();
        }
    });
    document.getElementById('send-button').addEventListener('click', function() {
        sendMessage();
    });
    document.getElementById('message-input').addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
            sendMessage();
        }
    });
    function sendMessage() {
        var messageInput = document.getElementById('message-input');
        var message = messageInput.value.trim();
        if (message !== '') {
            // 在这里发送消息到后端或显示到聊天界面
            $.ajax({
                type: "POST",
                url: "http://192.168.43.172:8080/chat/UploadString?message="+message,
                // data: message,
                // processData: true, // 防止jQuery自动将数据转换为查询字符串
                // contentType: true, // 防止jQuery设置Content-Type头部
                success: function(response) {
                    // 在这里处理从服务器返回的成功响应
                    console.log("表单数据成功提交:", response);
                },
                error: function(xhr, status, error) {
                    // 在这里处理错误
                    console.error("提交表单数据时出错:", error);
                }
            });

            displayXiaomingMessage(message);
            messageInput.value = '';
        }
    }
    function sendImage() {
        var imageInput = document.getElementById('image-input');
        var file = imageInput.files[0];
        if (file) {
            // 在这里发送图片到后端或显示到聊天界面
            var reader = new FileReader();
            reader.onload = function(e) {
                var imageSrc = e.target.result;
                displayImageMessage(imageSrc);
            };
            reader.readAsDataURL(file);
        }
    }
    function displayXiaomingMessage(content) {
        var chatContent = document.getElementById('chat-content');
        var messageContainer = document.createElement('div');
        messageContainer.classList.add('message-container', 'xiaoming-message');

        var messageDiv = document.createElement('div');
        messageDiv.classList.add('message');

        var messageContent = document.createElement('p');
        messageContent.classList.add('message-text');
        messageContent.textContent = content+':'+username1;

        messageDiv.appendChild(messageContent);
        messageContainer.appendChild(messageDiv);
        chatContent.appendChild(messageContainer);

        // 滚动到最底部
        chatContent.scrollTop = chatContent.scrollHeight;
    }
    function displayImageMessage(src) {
        var chatContent = document.getElementById('chat-content');
        var messageContainer = document.createElement('div');
        messageContainer.classList.add('message-container', 'xiaoming-message');
        var messageDiv = document.createElement('div');
        messageDiv.classList.add('message');
        var imageElement = document.createElement('img');
        imageElement.src = src;
        imageElement.style.maxWidth = '200px';// 调整图片最大宽度
        imageElement.style.maxHeight='300px';
        messageDiv.appendChild(imageElement);
        messageContainer.appendChild(messageDiv);
        chatContent.appendChild(messageContainer);
        // 滚动到最底部
        chatContent.scrollTop = chatContent.scrollHeight;
    }// 在实际应用中，可以通过WebSocket等技术来实现实时聊天功能

</script>
</body>
</html>
